<template>
  <view
    :class="['com-header', { 'nav-show': navShow }]"
    :style="{
      width: '100%',
      height: `${navHeight * 2}rpx`,
      position: 'fixed',
      top: 0,
      zIndex: 9999
    }"
  >
    <view
      class="logo-title"
      :style="{
        marginTop: `${navMarginTop * 2}rpx`,
        height: `${itemHeight * 2}rpx`,
        // lineHeight: `${itemHeight * 2}rpx`,
        maxWidth: `${navWidth * 2}rpx`
      }"
    >
      <slot name="default" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  value: {
    type: Boolean,
    default: false
  }
})

watch(
  () => props.value,
  (value) => {
    navShow.value = value
  }
)

const navShow = ref(false)
const navHeight = ref()
const navMarginTop = ref()
const itemHeight = ref()
const navWidth = ref()

onMounted(() => {
  uni.getSystemInfoSync()
  const { top, width, height, right } = wx.getMenuButtonBoundingClientRect()
  uni.getSystemInfo({
    success: (res) => {
      const statusBarHeight = res.statusBarHeight as number
      const margin = top - statusBarHeight
      navHeight.value = height + statusBarHeight + margin * 2
      navMarginTop.value = statusBarHeight + margin
      itemHeight.value = height
      navWidth.value = right - width - 20
    }
  })
})
</script>

<style lang="scss" scoped>
.com-header {
  background-color: var(--color-background);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 500ms, transform 350ms;

  &.nav-show {
    opacity: 1;
    transform: translateY(0%);
  }
}
</style>
